<!--
	课程列表
-->
<template>
<div class="main-box">
<!-- 中间隔层 start -->
<div class="user-info-box">
	<div class="user-info">
		<div class="left">
			<el-avatar :size="100"
					   src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
			</el-avatar>
		</div>
		<div class="right">
			<div style="font-size: 27px">
				{{ teacherInfoData.loginInfo.name }}	，{{new Date().getHours()<12?"上午好":"下午好"}}
			</div>
			<div>
				教育是立国之本,强国之基
			</div>
		</div>
	</div>
</div>
<!-- 中间隔层 end -->
<!-- 下面的主要内容 start -->
<div class="main-content">
	<el-tabs v-model="activeName">
		<el-tab-pane name="1">
			<template #label>
				<div class="label">课程</div>
			</template>
			<div class="content">
				<lzk-course-list></lzk-course-list>
			</div>
		</el-tab-pane>
		<!--<el-tab-pane name="2">
			<template #label>
				<div class="label">
					任务
					<el-badge :value="12">
					</el-badge>
				</div>
			</template>
			<div class="content">
				<lzk-h info="zheshi" show="tip"></lzk-h>
			</div>
		</el-tab-pane>-->
		<el-tab-pane name="3">
			<template #label>
				<div class="label">
					通知
					<el-badge :value="noticeList.length">
					</el-badge>
				</div>
			</template>
			<!-- 通知栏的内容 start -->
			<lzk-h info="这里仅展示最近7天发布的内容" show="tip" @click="test"></lzk-h>
			<div class="content">
				<div class="content-in-information" >
					<el-card class="box-card" v-for="item in noticeList">
						<template #header>
							<div style="color: #8CC5FF;">
								《{{getCourseName(item.courseId)}}》
							</div>
							<div class="card-header">
								<p>{{item.title}}</p>
								<p>{{getDateString(item.createTime)}}</p>
							</div>
						</template>
						<div class="card-content">

							{{item.content}}
						</div>
					</el-card>
				</div>

			</div>
			<!-- 通知栏的内容 end -->
		</el-tab-pane>
	</el-tabs>
</div>
<!-- 下面的主要内容 end -->
</div>
</template>

<script>
import CourseList from "@/views/teacher/courseList/CourseList";
import MessageHeaderBar from "@/components/tip/TipHeader";
import ipconfig from "@/utils/ipconfig";
import axios from "@/plugins/axios";
import {ElMessage} from "element-plus";
import qs from 'qs';
import DateUtils from "@/utils/DateUtils";

export default {
	name: "CourseListIndex",
	data(){
		return {
			/**
			 * 当前选中页
			 */
			activeName:'1',
			/**
			 * 教师登录数据
			 */
			teacherInfoData:this.$store.state.teacherInfoData,
			/**
			 * 显示的通知列表
			 */
			noticeList:[],
		}
	},
	methods:{
		/*
		* 获取显示时间
		* @param date 时间戳
		* @returns {string}
		* */
		getDateString(date){
			return DateUtils.getDateSting(date);
		},
		/**
		 * 获取课程名称
		 * @param courseId
		 * @returns {string}
		 */
		getCourseName(courseId){
			let name="";
			this.teacherInfoData.courseList.forEach(item=>{
				if(item.id==courseId){
					name=item.name;
				}
			});
			return name;
		},
		test(){
			console.log(this.teacherInfoData)
		}
	},
	mounted() {
		// 获取登录数据
		axios.get(ipconfig.address+"/common/logedInfo").then((response)=>{
			if(response.data.code==200){
				this.teacherInfoData.loginInfo=response.data.data;
			}else{
				ElMessage.warning(response.data.message);
			}
		}).catch((error)=>{
			console.log(error);
		});

		// 获取通知数据
		/*axios.get(ipconfig.address+"/notice/nearNotice/7",{
			params: {
				idList: [1000,1001]
			},
			paramsSerializer: params => {
				return qs.stringify(params, { indices: false })
			}
		}).then((response)=>{
			if(response.data.code==200){
				console.log(response.data.data)
			}else{
			    ElMessage.warning(response.data.message);
			}
		}).catch((error)=>{
		    console.log(error);
		});*/
		axios.get(ipconfig.address+"/notice/nearNotice/"+this.teacherInfoData.loginInfo.id+"/7").then((response)=>{
			if(response.data.code==200){
				this.noticeList=response.data.data;
				console.log(response.data.data);
			}else{
			    ElMessage.warning(response.data.message);
			}
		}).catch((error)=>{
		    console.log(error);
		});
	},
	components:{
		"lzk-course-list":CourseList,
		"lzk-h":MessageHeaderBar,
	},
}
</script>

<style lang="scss" scoped>
.main-box{
	margin-top: 20px;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	.user-info-box{
		width: 100%;
		height: 200px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #8CC5FF;

		.user-info{
			width: 80%;
			display: flex;
			flex-direction: row;
			.left{
				margin-right: 10px;
			}
			.right{
				color: #ffffff;
				div{
					margin-top: 15px;
				}
			}
		}
	}

	.main-content{
		width: 80%;
		height: 100%;

		.label{
			font-size: 20px;
		}
		.content{
			width: 100%;
			height: 100%;
			background: #f6f6f6;

			.content-in-information{
				width: 100%;
				margin-left: 40px;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
			}
		}
	}
}
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.card-content{
	height: 120px;
}
.text {
	font-size: 14px;
}

.item {
	margin-bottom: 18px;
}

.box-card {
	width: 480px;
	margin: 20px;
}
</style>